<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height = "500"></canvas>

    <script>
        var cvs = document.getElementById('cvs')
        var ctx = cvs.getContext('2d')
        /*
        * 平移坐标轴：
        * ctx.translate( x轴平移量，y轴平移量 )
        * 注意：已绘制的图形不会受到影响；平移会累加(在之前平移、旋转、缩放的基础上再平移)。
        * */

        ctx.fillRect( 10, 10, 50, 50)
        
        ctx.translate(100, 100)
        ctx.fillRect( 10, 10, 50, 50)

        ctx.translate(100, 100)
        ctx.fillRect( 10, 10, 50, 50)
    </script>
</body>
</html>